<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react-事件</title>
</head>
<body>

<div id="app">


</div>

</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/babel">


    /**
     *    html
     *  <button onclick="btnClick()">按钮1</button>
     *
     *    vue
     *
     *   <button @click="btnClcik">按钮1</button>
     *
     *
     *   react
     *
     *   <button onClick = {btnClick}>按钮1</button>
     *
    * */


      class EventTestor extends  React.Component{

          constructor(props){
              super(props);
              this.state={
                   isToggle:true
              }

              this.btnClick = this.btnClick.bind(this);
          }

          btnClick(){
                this.setState(preState=>({
                     isToggle: !preState.isToggle
                }))

          }
          render(){
               return (
                   <div>
                       <button onClick={this.btnClick}>
                           {
                               this.state.isToggle?'ON':'OFF'
                           }
                       </button>
                   </div>
               );
          }
    }

    ReactDOM.render(<EventTestor/>,document.getElementById('app'));



</script>




</html>